<template>
	<view>
		<view class="body">
		    <view class="detail-header flex-row">
		        <view class="header flex-grow-1">
		            <text @tap="statuschange(1)" :class="'income ' + (status == 1 ? 'gain' : '')">收入</text>
		        </view>
		        <view class="header flex-grow-1">
		            <text @tap="statuschange(2)" :class="'income ' + (status == 2 ? 'hand' : '')">支出</text>
		        </view>
		    </view>
		    <view class="income-list" v-if="list.length > 0">
		        <view class="income-one" v-for="(item, index) in list" :key="item.id">
		            <view class="income-road">{{ item.type_text }}</view>
		
		            <view class="flex-row">
		                <view class="flex-grow-1" style="color: #ff6f28" v-if="status == 1">+{{ item.score }}{{money_name}}</view>
		                <view class="flex-grow-1" style="color: #ff6f28" v-else>{{ item.score }}{{money_name}}</view>
		                <view class="flex-grow-0" style="color: #999999; font-size: 9pt; margin-top: 6rpx">{{ item.createtime }}</view>
		            </view>
		        </view>
		    </view>
			<view class="" style="color: #999999;text-align: center;margin: 15rpx;" v-if="!has_more">
				没有了~
			</view>
		</view>
	</view>
</template>

<script>
	import {My} from '../../../apirequest/my-model.js';
	var m = new My();
	var is_no_more = false;
	var is_loading = false;
	export default {
		data() {
			return {
			gain: true,
			page: 1,
			status: 1,
			list: [],
			has_more: true,	
			money_name:this.globalData.money_name,
			}
		},
		onLoad() {
			this._getList()
		},
		onReachBottom() {
			this._getList()
		},
		methods: {
			_getList(){
				var that = this;
				var page = this.page;
				if(!this.has_more){
					return false;
				}
				m.score_list({page:page,status:this.status},(res) => {
					if(res.code == 1){
						that.list = that.list.concat(res.data.data)
						that.page = page+1
						that.has_more = res.data.has_more
					}
				})
			},
			statuschange(status){
				this.status = status
				this.page = 1
				this.has_more = true
				this.list = []
				this._getList()
			},
		}
	}
</script>

<style>
page {
    background-color: #fff;
}

.detail-header {
    height: 88rpx;
    border-top: 1rpx solid #e2e2e2;
    border-bottom: 1rpx solid #e2e2e2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

.header {
    color: #353535;
    font-size: 14px;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.income {
    height: 100%;
    width: 38%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.income.gain {
    border-bottom: 4rpx solid #ff6f28;
    color: #ff6f28;
}

.income.hand {
    border-bottom: 4rpx solid #ff6f28;
    color: #ff6f28;
}

.income-list {
    padding-top: 88rpx;
}

.income-road {
    margin: 0 0rpx 16rpx 0rpx;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-one {
    padding: 40rpx 24rpx;
    border-bottom: 1rpx solid #e2e2e2;
}
</style>
